﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>View</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-table.css" rel="stylesheet" />
    <script src="~/scripts/jquery-1.10.2.min.js"></script>
    <script src="~/scripts/bootstrap.min.js"></script>
    <script src="~/scripts/bootstrap-table.js"></script>
    <script src="~/scripts/locale/bootstrap-table-zh-CN.js"></script>
    <script type="text/javascript">
        function initTable() {
            $("#table").bootstrapTable({
                columns: [
                    {
                        checkbox: true, visible: true//是否显示复选框
                    },
                    { field: 'ID', title: 'ID', sortable: true },
                    { field: 'DepartmentTypeCode', title: '分类编号' },
                    { field: 'DepartmentTypeName', title: '分类名称' },
                    {
                        field: 'ID',
                        title: '操作',
                        align: 'center',
                        valign: 'middle',
                        formatter: actionFormatter
                    },
                ],
                url: '@Url.Action("GetDepartmentTypeList", "DepartmentTypes")',
                //method: 'get',                      //请求方式（*）
                method: 'POST',
                contentType:'application/x-www-form-urlencoded;charset=UTF-8',//发送到服务器的数据编码类型，适用于post请求
                toolbar: '#toolbar',              //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: true,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
                pageSize: 10,                     //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: false,                      //是否显示表格搜索
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列（选择显示的列）
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                //height: 300,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                showToggle: false,                   //是否显示详细视图和列表视图的切换按钮
                //cardView: true,                    //是否显示详细视图
                detailView: false,      //是否显示父子表
                paginationPreText: "上一页",
                paginationNextText: "下一页",
                //得到查询参数
                queryParams: function (params) {
                    var temp = {
                        limit: params.limit,//页面大小
                        offset: params.offset,//要跳过的页码
                        sortcolumsname: params.sort,
                        order: params.order,
                        txtNum: $("#txtNum").val(),
                        txtName:$("#txtName").val()
                    };
                    return temp;
                },
            });
        }

        $(function () {
            initTable();
            $("#btn-search").click(function () {
                $("#table").bootstrapTable('refresh');
            });
            $("#btn-reset").click(function () {
                $("#txtNum").val("");
                $("#txtName").val("");
                $("#table").bootstrapTable('refresh');
            });
        });
        //操作栏的格式化
        function actionFormatter(value, row, index) {
            var id = value;
            var result = "";
            result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-edit'></span></a>";
            result += "&nbsp;&nbsp;<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteById('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";

            return result;
        }

        //执行新增操作
        $(function () {
            $("#btn_add").click(function () {
                $("#EmsModal_Create").modal("show");
            });
            $("#EmsModal_Create #operateModal_Create-btn").click(function () {
                $("#AddDepartmentTypeForm").submit();
                $("#EmsModal_Create").modal("hide");
            });
        });
        //修改方法
        function EditRecords() {
            var opts = $("#table").bootstrapTable('getSelections');
            if (opts.length != 1) {
                Info("请选择一条要修改的记录");
            } else {
                $("#EmsModal_Edit #Id").val(opts[0].ID);
                $("#EmsModal_Edit #departmenttypecode").val(opts[0].DepartmentTypeCode);
                $("#EmsModal_Edit #departmenttypename").val(opts[0].DepartmentTypeName);
                $("#EmsModal_Edit").modal("show");

                $("#EmsModal_Edit #operateEmsModal_Edit-btn").click(function () {
                    var EditArray = new Array();
                    var arrays = {};
                    arrays.ID = $("#EmsModal_Edit #Id").val();
                    arrays.DepartmentCode = $("#EmsModal_Edit #departmenttypecode").val();
                    arrays.DepartmentName = $("#EmsModal_Edit #departmenttypename").val();
                    EditArray.push(arrays);
                    $.ajax({
                        url: "/DepartmentTypes/Edit",
                        type: "post",
                        data: {
                            "EditArray": JSON.stringify(EditArray)
                        },
                        dataType: "json",
                        success: function (data) {
                            if (data == "isok") {
                                $("#EmsModal_Edit").modal("hide");
                                Info("修改成功");
                                $("#table").bootstrapTable('refresh');
                            }
                        }
                    });
                });
            }
        }
        //按行修改
        function EditById(id) {
            var opts = $("#table").bootstrapTable('getRowByUniqueId',id);
                $("#EmsModal_Edit #Id").val(opts.ID);
                $("#EmsModal_Edit #departmenttypecode").val(opts.DepartmentTypeCode);
                $("#EmsModal_Edit #departmenttypename").val(opts.DepartmentTypeName);
                $("#EmsModal_Edit").modal("show");

                $("#EmsModal_Edit #operateEmsModal_Edit-btn").click(function () {
                    var EditArray = new Array();
                    var arrays = {};
                    arrays.ID = $("#EmsModal_Edit #Id").val();
                    arrays.DepartmentCode = $("#EmsModal_Edit #departmenttypecode").val();
                    arrays.DepartmentName = $("#EmsModal_Edit #departmenttypename").val();
                    EditArray.push(arrays);
                    $.ajax({
                        url: "/DepartmentTypes/Edit",
                        type: "post",
                        data: {
                            "EditArray": JSON.stringify(EditArray)
                        },
                        dataType: "json",
                        success: function (data) {
                            if (data == "isok") {
                                $("#EmsModal_Edit").modal("hide");
                                Info("修改成功");
                                $("#table").bootstrapTable('refresh');
                            }
                        }
                    });
                });
        }
        //执行删除操作
        function DeleteById(id) {
            if (confirm("确定删除ID为：" + id + " 的记录吗？")) {
                $.ajax({
                    url: "/DepartmentTypes/DeleteById",
                    type:"post",
                    data: {
                        "Id": id
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data == "isok") {
                            alert("删除成功");
                            $("#table").bootstrapTable('refresh');
                        }
                    }
                });
            }
        }
        //批量删除
        function DeleteRecords() {
            var opts = $("#table").bootstrapTable('getSelections');
            if (opts == "") {
                Info("请选择要删除的记录");
            }
            else {
                var idArray = new Array();
                for (var i = 0; i < opts.length; i++) {
                    var option = {};
                    option.ID = opts[i].ID;
                    option.DepartmentCode = opts[i].DepartmentTypeCode;
                    option.DepartmentName = opts[i].DepartmentTypeName;
                    idArray.push(option);
                }
                if (confirm("确定删除所选 "+idArray.length+" 条记录码？")) {
                    $.ajax({
                        url: "/DepartmentTypes/Delete",
                        type: "post",
                        data: {
                            "idArray": JSON.stringify(idArray)
                        },
                        dataType:"json",
                        success: function (data) {
                            if (data = "isok") {
                                Info("删除成功！");
                                $("#table").bootstrapTable('refresh');
                            }
                        }
                    });
                }
            }
        }

        //提示对话框，一框多用
        function Info(message) {
            $("#infoModal #message").text(message);
            $("#infoModal").modal("show");
        }
        //确认对话框返回TRUE or FALSE
        //function besure(message) {
        //    $("#confirmModal #message").text(message);
        //    $("#confirmModal").modal("show");
        //    var isbool=$("#confirmModal").on("click",function (e) {
        //        if (e.target.id == "btn-not") {
        //            return false;
        //            $("#confirmModal").modal("hide");

        //        } else if (e.target.id == "btn-yes") {
        //            return true;
        //            $("#confirmModal").modal("hide");
        //        }
        //    });
        //    alert(isbool);
        //}
    </script>
</head>
<body>
    <div style="padding-top:10px;padding-left:15px;padding-right:15px;">
        <div class="form-group-sm">
            <div class="col-xs-2">
                <input type="text" id="txtNum" class="form-control" placeholder="分类编号" />
            </div>
            <div class="col-xs-2">
                <input type="text" id="txtName" class="form-control" placeholder="分类名称" />
            </div>
            <button id="btn-search" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>  搜索</button>
            <button id="btn-reset" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>  重置</button>
        </div>
        <div id="toolbar" class="btn-group-sm">
            <button id="btn_add" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增
            </button>
            <button id="btn_edit" onclick="EditRecords()" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 修改
            </button>
            <button id="btn_delete" onclick="DeleteRecords();" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 删除
            </button>
        </div>
        <table id="table"></table>
    </div>
    <!-- Modal(新增) -->
    <div class="modal fade" id="EmsModal_Create" tabindex="-1" role="dialog" aria-labelledby="EmsModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width:400px;" role="document">
            <div class="modal-content">
                <div class="modal-header" id="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="EmsModalLabel"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 添加</h4>
                </div>
                <div class="modal-body" id="EmsModalPreview">
                        @using (Html.BeginForm("Add", "DepartmentTypes", FormMethod.Post, new { id = "AddDepartmentTypeForm" }))
                        {
                            @Html.AntiForgeryToken()
                            <div style="margin-left:20px;margin-right:20px;">
                                <div class="form-group">
                                    <label class="control-label">分类编号</label>
                                    <input class="form-control" name="departmenttypecode" />
                                </div>
                                <div class="form-group">
                                    <label class="control-label">分类名称</label>
                                    <input class="form-control" name="departmenttypename" />
                                </div>
                            </div>
                        }
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 关闭</button>
                    <button type="button" id="operateModal_Create-btn" class="btn btn-primary"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal(修改) -->
    <div class="modal fade" id="EmsModal_Edit" tabindex="-1" role="dialog" aria-labelledby="EmsModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width:400px;" role="document">
            <div class="modal-content">
                <div class="modal-header" id="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"><span class="glyphicon glyphicon-edit"></span> 修改</h4>
                </div>
                <div class="modal-body">
                    <div style="margin-left:20px;margin-right:20px;">
                        <div class="form-group">
                            <label for="Id" class="control-label">ID</label>
                            <input class="form-control" readonly="readonly" id="Id" />
                        </div>
                        <div class="form-group">
                            <label for="departmenttypecode" class="control-label">分类编号</label>
                            <input class="form-control" id="departmenttypecode" name="departmenttypecode" />
                        </div>
                        <div class="form-group">
                            <label for="departmenttypename" class="control-label">分类名称</label>
                            <input class="form-control" id="departmenttypename" name="departmenttypename" />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 关闭</button>
                    <button type="button" id="operateEmsModal_Edit-btn" class="btn btn-primary"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal(消息提示框) -->
        <div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-sm" style="width:300px;" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="background-color:#286090;height:40px;">
                        <h4 class="modal-title" style="position:absolute;top:10px;left:10px;color:white;"><span class="glyphicon glyphicon-info-sign" aria-hidden="true" style="color:white;"></span> 提示</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p id="message" style="font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;font-size:medium"></p>
                    </div>
                    <div class="modal-footer" style="height:40px;">
                        <button type="button" class="btn btn-primary" style="position:absolute;right:10px;bottom:3px;" data-dismiss="modal">确定</button>
                    </div>
                </div>
            </div>
        </div>
    <!-- Modal(提示是否确认) 
    <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm" style="width:300px;" role="document">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#286090;height:40px;">
                    <h4 class="modal-title" style="position:absolute;top:10px;left:10px;color:white;">提示</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="message" style="font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;font-size:medium"></p>
                </div>
                <div class="modal-footer" style="height:40px;">
                    <button type="button" id="btn-not" class="btn btn-default" style="position:absolute;right:75px;bottom:3px;" ><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 否</button>
                    <button type="button" id="btn-yes" class="btn btn-primary" style="position:absolute;right:10px;bottom:3px;" ><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 是</button>
                </div>
            </div>
        </div>
    </div>-->
</body>
</html>

